<template>
	<div class="allcontainer" v-loading="loading">
		<div class="h2">活动成员管理</div>
		<div class="bg-white">
			<div id="components-form-demo-advanced-search">
				<a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
					<a-row :gutter="24">
						<a-col :span="8">
							<a-form-item label="关键字">
								<a-input class="field-right" placeholder="请输入姓名/学号搜索" v-decorator="[`key`]" />
							</a-form-item>
						</a-col>
						<a-col :span="16">
							<a-button type="primary" html-type="submit" @click="handleSearch" class="btn1">搜索</a-button>
							<a-button @click="handleReset" class="btn2">重置</a-button>
							<a-button type="primary" v-if="State!=4 && State!=5 && $route.query.ClubID" class="btn"
								@click="invitation">邀请成员</a-button>
							<!-- <a-button type="primary" class="btn" @click="fileimport" v-if="ChairmanNo==UserInfo.UserNo && State!=5 && State!=4">导入</a-button> -->
							<a-button type="primary" class="btn" @click="fileimport">导入</a-button>
							<a-button type="danger" @click="deleteAllMember" v-if="State!=5 && State!=4">批量删除</a-button>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<div class="table">
				<a-tabs :defaultActiveKey="userType" @change="callback" v-show="$route.query.ClubID">
					<a-tab-pane v-for="(item,i) in userTypeList" :key="item.Key" :tab="item.Value"></a-tab-pane>
				</a-tabs>
				<el-table stripe ref="singleTable" :data="data" @selection-change="handleSelectionChange"
					highlight-current-row style="width: 100%">
					<el-table-column type="selection" :selectable="selectable" width="55" fixed="left">
					</el-table-column>
					<el-table-column type="index" label="序号" width="60" fixed="left" align="center"></el-table-column>
					<el-table-column prop="Name" label="姓名/学号" min-width="160" fixed="left" align="center">
						<template slot-scope="scope">
							{{ scope.row.Name | testname }} / {{ scope.row.UserNo | testno }}
							<a-tag color="pink" v-if="scope.row.IsManager==true"> 管理员 </a-tag>
						</template>
					</el-table-column>
					<el-table-column prop="TypeName" label="类型" min-width="120" align="center"></el-table-column>
					<el-table-column prop="AddTime" label="加入时间" min-width="100" align="center"></el-table-column>
					<el-table-column prop="AddTime" label="添加类型" min-width="100" align="center">
						<template slot-scope="scope">
							{{ scope.row.IsImport?'导入':'正常加入' }}
						</template>
					</el-table-column>
					<el-table-column prop="AddUserName" label="操作人" min-width="100" align="center"></el-table-column>
					<el-table-column prop="IsEnable" label="操作" width="208" fixed="right" v-if="State!=4">
						<template slot-scope="scope">
							<div class="user-btn user-btn-auto">
								<span class="signin" @click="seeList(scope.row, 'UserActivitysignIndex')">签到记录</span>
								<span class="delete" v-if="!scope.row.IsManager&&State!=5 && State!=4"
									@click="deletemember(scope.row)">删除</span>
								<a-dropdown
									v-if="($route.query.ClubID && State!=5 && State!=4)||(!scope.row.IsManager && ChairmanNo == UserInfo.UserNo&&State!=5 && $route.query.ClubID)">
									<a style="color: #4169E0;padding-left: 10px;" class="ant-dropdown-link"
										@click.prevent>
										更多<i
											style="font-size: 25px;position: relative;top:12px;left:5px !important;font-style: normal;">ˇ</i>
									</a>
									<template #overlay>
										<a-menu>
											<a-menu-item v-if="$route.query.ClubID && State!=5 && State!=4"
												@click="setType(scope.row)">
												类型设置
											</a-menu-item>
											<a-menu-item
												v-if="!scope.row.IsManager && ChairmanNo == UserInfo.UserNo&&State!=5 && $route.query.ClubID"
												@click="setadmin(scope.row,3)">
												设为管理员
											</a-menu-item>
											<a-menu-item
												v-if="scope.row.IsManager && ChairmanNo == UserInfo.UserNo&&State!=5 &&$route.query.ClubID"
												@click="canceladmin(scope.row,4)">
												取消管理员
											</a-menu-item>
										</a-menu>
									</template>
								</a-dropdown>
							</div>
							<!-- <oprateBtn title="奖项管理" v-if="ChairmanNo == UserInfo.UserNo" icon="icon-huodong" color="green" @tap="seeList(scope.row,'UserActivityMemberPrize')"></oprateBtn> -->
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pagination.currentPage" :page-sizes="pagination.pageSizeOptions"
					:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="pagination.total"></el-pagination>
			</div>
		</div>
		<invitation :ID="ID" :ClubID="ClubID" :time="time" v-show="invitationShow" @closeFun="closeFun"></invitation>
		<ActivityMemberSetType v-show="ActivityMemberSetTypeIf" :text="text" @closeFun="closeFun">
		</ActivityMemberSetType>
		<exportcon :importText="importText" v-show="exportconIf" @closeFun="closeFun"></exportcon>
	</div>
</template>

<script>
	import Func from '@/utils/func';
	import Cache from '@/utils/cache'
	import {
		GetUserActivityMember,
		DeleteUserActivityMember,
		UserUpdateActivity,
		SetUserActivityMember,
		CancelUserActivityMember,
		DoInviteUserJoinActivity,
		UserActivityDetail,
		UserActivityMemberDoGetPageList
	} from '@/api/follow';
	import invitation from './InvitationMember'
	import ActivityMemberSetType from '@/components/ActivityMemberSetType.vue'
	import exportcon from '@/components/exportcon.vue'
	const data = [];
	export default {
		components: {
			invitation,
			ActivityMemberSetType,
			exportcon
		},
		data() {
			return {
				data,
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				addIf: false,
				text: {},
				visible: false,
				confirmLoading: false,
				itemId: '',
				departmentList: [],
				worklist: [],
				loading: false,
				values: {},
				pages: {
					pageIndex: 1,
					pageSize: 20
				},
				tableHeight: parseFloat(window.innerHeight - 160),
				TypeIDList: [],
				DepartCodeList: [],
				ProjectIDList: [],
				ishaveid: true,
				selectList: {},
				showModal: false,
				UserInfo: Cache.get('myInfo'),
				ChairmanNo: this.$route.query.ChairmanNo,
				linktype: 1,
				ID: this.$route.query.ID,
				ClubID: this.$route.query.ClubID,
				visible: false,
				deletelist: {},
				time: '',
				invitationShow: false,
				invitiondata: {},
				State: this.$route.query.State,
				ifbtn: false,
				ActivityMemberSetTypeIf: false,
				fileList: [],
				requestUrl: this.global.requestUrl,
				token: Cache.get('token'),
				importText: {},
				exportconIf: false,
				userType: 0,
				userTypeList: this.global.userTypeList,
				multipleSelection: []
			};
		},
		computed: {},
		created() {
			this.getList();
			this.getOtherList()
		},
		mounted() {},
		methods: {
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			selectable: function(row, index) {
				if (!row.IsManager) {
					return true;
				}
			},
			callback(key) {
				this.userType = key
				this.pagination.currentPage = 1
				this.getList()
			},
			fileimport() {
				this.importText = {
					name: '成员导入-用户',
					activityID: this.$route.query.ID,
					time: new Date
				}
				this.exportconIf = true
			},
			uploadChange(info) {
				if (info.file.status !== 'uploading') {}
				if (info.file.status === 'done') {
					this.$message.success(info.file.response.msg);
					// this.fileList = []
				} else if (info.file.status === 'error') {
					this.$message.error(info.file.response.msg);
					// this.fileList = []
				}
			},
			invitation() {
				this.time = new Date()
				this.invitationShow = true
			},
			setType(text) {
				this.text = {
					...text,
					mytype: 'user',
					time: new Date()
				}
				this.ActivityMemberSetTypeIf = true
			},
			setadmin(text) {
				let that = this
				this.$confirm({
					title: '提示',
					content: `您确定设定该用户为管理员吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {}
						data.userNo = text.UserNo
						data.ActivityID = that.ID
						let res = await SetUserActivityMember(data);
						if (res.data.code == 0) {
							that.getList()
							that.$message.success(res.data.msg)
						} else {
							that.$message.error(res.data.msg)
						}
					}
				})
			},
			canceladmin(text) {
				let that = this
				this.$confirm({
					title: '提示',
					content: `您确定取消该用户的管理员权限吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {}
						data.userNo = text.UserNo
						data.ActivityID = that.ID
						let res = await CancelUserActivityMember(data);
						if (res.data.code == 0) {
							that.getList()
							that.$message.success(res.data.msg)
						} else {
							that.$message.error(res.data.msg)
						}
					}
				})
			},
			handleCancel(e) {
				this.visible = false
				this.getList()
			},
			deletemember(text) {
				// this.visible = true
				// this.deletelist = text
				let that = this
				this.$confirm({
					title: '提示',
					content: `您确定删除该用户吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {}
						data.id = text.ID
						let res = await DeleteUserActivityMember(data);
						if (res.data.code == 0) {
							that.getList()
							that.$message.success(res.data.msg)
						} else {
							that.$message.error(res.data.msg)
						}
					}
				})
			},
			deleteAllMember() {
				if (this.multipleSelection.length == 0) {
					this.$message.error('请先选择要删除的成员！');
				} else {
					let that = this;
					this.$confirm({
						title: '提示',
						content: '确定要删除选中的成员吗？',
						okText: '确认',
						cancelText: '取消',
						async onOk() {
							let list = that.multipleSelection;
							for (let i = 0, len = list.length; i < len; i++) {
								let data = {};
								data.id = list[i].ID;
								let res = await DeleteUserActivityMember(data);
								if (res.data.code == 0) {
									that.$message.success(`成功删除${i+1}条数据`)
								} else {
									that.$message.error(res.data.msg)
								}
							}
							that.getList();
						}
					});
				}
			},
			detail(text, type) {
				this.linktype = type
				this.text = text
				this.time = new Date()
				this.showModal = true
			},
			handleChange(val) {
				this.currentRow = val;
				if (val.ID) {
					this.ishaveid = false
					this.selectList = val
				} else {
					this.ishaveid = true
				}
			},
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.pagination.currentPage = 1;
					this.values = values;
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.getList();
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			async getList() {
				this.loading = true;
				let data = {};
				if (this.values) {
					data = this.values;
				}
				data.activityID = this.$route.query.ID
				data.pageIndex = this.pagination.currentPage;
				data.pageSize = this.pagination.pageSize;
				data.type = this.userType == 0 ? '' : this.userType
				let res = await UserActivityMemberDoGetPageList(data);
				this.loading = false;
				this.data = res.data.data;
				const pagination = {
					...this.pagination
				};
				pagination.total = res.data.pageInfo.TotalItemCount;
				this.pagination = pagination;
			},
			async getOtherList() {
				let data = {}
				data.id = this.$route.query.ID
				let res3 = await UserActivityDetail(data)
				let num1 = Date.parse(new Date())
				this.State = res3.data.data.State
				let num2 = Date.parse(res3.data.data.EndTime.replace(/-/g, '/'))
				if (num1 < num2) {
					this.ifbtn = true
				} else {
					this.ifbtn = false
				}
			},
			addList() {
				this.text = {};
				this.addIf = !this.addIf;
			},
			modifyList(text) {
				this.text = {
					...text,
					time: new Date()
				};
				this.addIf = !this.addIf;

			},
			seeList(text, name) {
				this.$router.push({
					name: name,
					query: {
						ID: text.ID,
						State: this.State
					}
				});
			},
			closeFun(data) {
				this.showModal = false
				this.invitationShow = false
				this.ActivityMemberSetTypeIf = false
				this.exportconIf = false
				if (data == 1) {
					this.getList()
				}
			},
		}
	};
</script>
